
// 黑夜模式
html.dark,
body.dark{
  background-color: #141414;
  height: 100%;
  .ant-menu-submenu-popup > .ant-menu{
    background-color: #555;
    color: rgba(255,255,255,0.85) !important;
  }
  .box{
    background-color: #1f1f1f !important;
  }
  img{
    filter: brightness(40%);
  }
  .header{
    .ant-switch-checked{
      background-color: #555;
    }
    .logo{
      filter: brightness(80%);
    }
    .userAvatar{
      img{
        filter: brightness(70%);
      }
    }
    background-color: #1f1f1f;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 65%);
    .create-btn{
      background-color: #555;
      border-color: #555;
    }
    .ant-menu{
      background-color: transparent;
      color: rgba(255,255,255,0.85) !important;
    }
  }
  .content-row{
    .ant-tabs{
      .ant-tabs-nav{
        &::before{
          border-color: #555 !important;
        }
        .ant-tabs-tab{
          color: rgba(255,255,255,0.85);
        }
      }  
      .ant-empty{
        .ant-empty-image{
          img{
            filter: brightness(80%);
          }
        }
        .ant-empty-description{
          span{
            color: rgba(255,255,255,0.85) !important;
          }
        }
      }
    }
    .ant-col{
      background-color: #1f1f1f !important;
      #list_container{
        div{
            color: rgba(255,255,255,0.85);
        }
        &:hover{
            background-color: #262626;
        }
        div{
          a:hover{
            color: #1e80ff;
          }
        }
        div:last-child{
          border-color: #555 !important;
        }
        div::before,
        div::after{
          background-color: #555;
        }
      }
    }
  }
  .ant-popover{
    div{
      &.ant-popover-arrow{
        background-color: transparent;
        span{
          background-color: #555;
        }
      }
      background-color: #555;
      color: rgba(255,255,255,0.85);
      .number{
       color: rgba(255,255,255,0.85);
      }
      .follow-btn{
        border-color: rgba(255,255,255,0.85);
        color: rgba(255,255,255,0.85);
      }
    }
  }
  #content-right{
    background-color: transparent;
    div{
      background-color: #1f1f1f;
      button{
        background-color: #555;
      }
      span{
        color: rgba(255,255,255,0.85);
      }
      img{
        filter: brightness(60%);
      }
      .ant-btn-round{
        background-color: #555;
        border-color: #555;
        color: rgba(255,255,255,0.85);
      }
    }
  }
  // 文章
  #articles_content{
    background-color: #1f1f1f;
    div:first-child{
      p{
        color: rgba(255,255,255,0.85);
      }
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    li,
    a,
    p,
    blockquote,
    th,
    tr,
    span{
      color:rgba(255,255,255,0.85) !important;
    }
    blockquote{
      background-color: #555 !important;
    }
    .ant-tag{
      background-color: #555;
      border-color: #555;
    }
    .articles-btn{
      background-color: #555;
      border-color: #555;
      color: #fff;
    }
  }
  #articles-right{
    div{
      background-color: #1f1f1f !important;
      div,span,p,a{
        color: rgba(255,255,255,0.85);
      }
      .ant-anchor-link-active a{
        color: #1e80ff;
      }
    }
    .affix{
      background-color: red;
      div{
        background-color: #1f1f1f !important;
        color: rgba(255,255,255,0.85);
      }
    }
  }
  #tag-container{
    background-color: #1f1f1f;
    border-color: #555;
    .ant-tag{
      background-color: #555;
      color: rgba(255,255,255,0.85);
      border-color: #555;
    }
  }
  .comment-textArea{
    background-color: #555;
    color: rgba(255,255,255,0.85);
  }
  .ant-btn-block.ant-btn{
    background-color: #555;
    border-color: #555;
  }
  .ant-divider{
    background-color: #1f1f1f !important;
    color: #555;
  }
  #articles_content{
    .ant-divider{
      background-color: transparent !important;
    }
   
  }
  #articles_content .ant-divider::before,
  #articles_content .ant-divider::after{
    border-top-color: #555 !important;
  }
  .comment-textArea{
    border-color: #555;
  }
  .ant-statistic-title{
    color: #555;
  }
  .ant-select{
    .ant-select-selector{
      background-color: #1f1f1f !important;
      border-color: #555 !important;
    }
  }
  .ant-select-dropdown{
    background-color: #555 !important;
    span{
      color: rgba(255, 255, 255, 0.85);
    }
    .ant-select-item-option-active{
      background-color: rgba(255, 255, 255, 0.85);
      span{
        color: #555;
      }
    }
  }
  .ant-select-selection-item{
    span{
      color: rgba(255, 255, 255, 0.85);
    }
  }


  // 主页
  #info{
    background-color: #141414;
    #infoBox{
      background-color: #1f1f1f !important;
      h2,span{
        color: #555;
        &::after{
          background-color: #555;
        }
      }
      label{
        color: #555 !important;
      }
      .ant-select-selection-item{
       color: rgba(255, 255, 255, 0.85);
      }
      button,input, textarea{
        border-color: #555;
        background-color: #555;
        color: rgba(255, 255, 255, 0.85);
        span{
          color: rgba(255, 255, 255, 0.85);
        }
      }
    }
    #contentRight,
    #contentLeft{
      background-color: #1f1f1f;
      div, h4, a{
        color: rgba(255, 255, 255, 0.85);
      }
      .ant-tabs-nav::before{
        border-color: #555;
      }
      .ant-tabs-tab{
        background-color: transparent;
        border-color: #555;
      }
    }
  }
  .row{
    background-color: #1f1f1f !important;
  }
  #categories{
    background-color: #141414;
  }
  .ant-menu-title-content a{
    color: #fff !important;
  }
  .downMenu{
    background-color: #1f1f1f;
    .menuItem:hover{
      background-color: rgba(255, 255, 255, 0.85);
    }
  }
  .search,.bug{
    .ant-modal-header, .ant-modal-footer{
      background-color: #1f1f1f;
      div{
        color: #fff ;
      }
    }
    textarea{
      background-color: #555;
    }
    .ant-modal-body{
      background-color: #1f1f1f !important;
      .ant-input-group{
        background-color: #555;
        input{
          background: transparent;
        }
        .ant-btn-primary{
          background-color: #555;
          border-color: #fff;
        }
      }
      li{
        color: rgba(255, 255, 255, 0.85);
        &:hover{
          background-color: #555;
        }
      }
    }
  }
  
  }
  
 